<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :sm="24" :lg="12" style="padding-left: 20px;">
        <h1>{{ title }}</h1>
        <h3 style="padding-left: 15px">v{{ version }}</h3>
        <p>
          该项目是基于Solon框架的充电桩模拟系统，前端采用Vue3+Element-Plus，后端采用Solon+Mybatis-Flex+Redis，数据库采用MySQL。
          <br>
          主要是为了方便对接充电桩的开发者，提供一个简单的模拟环境，方便开发者调试和测试。
        </p>
        <el-button style="margin-top: 10px;" type="primary" icon="Cloudy" plain @click="goTarget(gitee)">访问码云</el-button>
        <el-card style="width: 240px; height: 360px; margin-top: 20px;">

          <template #header>
            <div>
              <span>作者微信</span>
            </div>
          </template>
          <div style="height: 260px;">
            <!-- 添加微信图片 -->
            <img style="width: 100%;" src="@/assets/images/wx.jpg" alt="微信">
            <div style="text-align: center;">
              <span style="display: inline-block; height: 30px; line-height: 30px;">微信号：17629717751</span>
            </div>

          </div>
        </el-card>
      </el-col>
      <el-col :sm="24" :lg="12" style="padding-left: 50px;">
        <el-row>
          <el-col :span="12">
            <h2>技术选型</h2>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <h3>后端技术</h3>
            <ul>
              <li>Solon</li>
              <li>Vert.x</li>
              <li>HikariCP</li>
              <li>Mybatis-Flex</li>
              <li>Redis</li>
              <li>Sa-Token</li>
              <li>Hutool</li>
              <li>...</li>
            </ul>
          </el-col>
          <el-col :span="6">
            <h3>前端技术</h3>
            <ul>
              <li>Vue</li>
              <li>Vue-Router</li>
              <li>Pinia</li>
              <li>Element-Plus</li>
              <li>Axios</li>
              <li>Js-Cookie</li>
              <li>...</li>
            </ul>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <el-divider />

  </div>
</template>

<script name="Index" setup>
import { title } from '@/store/modules/settings'

const version = ref('2.1.0')
const gitee = ref('https://gitee.com/dabai-energy/charging-simulation')
const ruoyi = ref('https://www.ruoyi.vip')
const solon = ref('https://solon.noear.org')

function goTarget(url) {
  window.open(url, '__blank')
}
</script>

<style lang="scss" scoped>
.home {
  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  h1 {
    display: inline-block;
    margin-top: 0px;
    font-size: 26px;
    font-weight: 400;
  }

  h3 {
    display: inline-block;
    margin-top: 0px;
  }

  p {
    margin-top: 0px;
  }

  .link-size {
    font-size: 13px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  ol {
    display: block;
    list-style-type: decimal;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-inline-start: 40px;
  }
}
</style>
